<template>
  <div>
    <div class="bread" style="margin-bottom: 30px;">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '#' }" style="font-size: 20px;"
          >首页</el-breadcrumb-item
        >
        <el-breadcrumb-item style="font-size: 20px;"
          >订单管理</el-breadcrumb-item
        >
        <el-breadcrumb-item style="font-size: 20px;"
          >退款申请</el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>

    <el-row style="margin-top: 30px;">
      <el-col style="margin-left:50px;" :span="2" :offset="0">
        <el-select
          @change="listRefundOrders"
          v-model="refundState"
          clearable
          placeholder="退款状态"
        >
          <el-option
            v-for="item in options"
            :key="item.state"
            :label="item.label"
            :value="item.state"
          >
          </el-option>
        </el-select>
      </el-col>
    </el-row>

    <div ref="table">
      <el-table
        :data="page.list"
        border
        style="width: 1411px;margin-left: 50px;margin-top: 20px;"
        :stripe="true"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column prop="refundId" label="退款编号" width="180">
        </el-table-column>
        <el-table-column prop="orderId" label="订单编号" width="180">
        </el-table-column>
        <el-table-column prop="refundMoney" label="退款金额" width="150">
        </el-table-column>
        <el-table-column prop="refundReason" label="退款原因" width="270">
        </el-table-column>
        <el-table-column prop="userId" label="用户id" width="100">
        </el-table-column>
        <el-table-column prop="refundTime" label="退款时间" width="230">
          <template slot-scope="scope">
            <span>{{
              scope.row.refundTime == null
                ? ""
                : scope.row.refundTime
                    .toLocaleString()
                    .replace(/T/g, " ")
                    .replace(/\.[\d]{3}Z/, "")
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="退款状态" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.refundState == 0"
              >待处理<i style="color:chocolate;" class="el-icon-warning"></i
            ></span>
            <span v-if="scope.row.refundState == 3"
              >已驳回<i style="color:chocolate;" class="el-icon-warning"></i
            ></span>
            <span v-if="scope.row.refundState == 1"
              >退款中<i style="color:chocolate;" class="el-icon-warning"></i
            ></span>
            <span v-if="scope.row.refundState == 2"
              >退款成功<i style="color: limegreen;" class="el-icon-success"></i
            ></span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.refundState == 0"
              @click="handleCheckClick(scope.row)"
              type="warning"
              icon="el-icon-loading"
              size="mini"
              round
              >点击处理</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        :visible.sync="showCheckWindow"
        width="30%"
        :before-close="handleClose"
      >
        <template slot="title">
          <div style="font-size:18px;font-weight: 999;">审核申请退款</div>
        </template>
        <div style="width: 400px;">
          <el-button
            style="margin-left: 100px;"
            type="primary"
            @click="refund()"
            >审核通过</el-button
          >
          <el-button type="danger" @click="handleNoPassClick(applyMessage)"
            >不通过</el-button
          >
        </div>
      </el-dialog>
      <el-dialog
        :close-on-click-modal="false"
        :show-close="false"
        :close-on-press-escape="false"
        :visible.sync="showReplyWindow"
        width="30%"
      >
        <template slot="title">
          <div style="font-size:18px;font-weight: 999;">不通过原因</div>
        </template>
        <div style="width: 400px;">
          <el-form
            :model="noPassReason"
            label-width="100px"
            status-icon
            :rules="rules"
            ref="noPassReason"
            class="demo-ruleForm"
          >
            <el-form-item label="原因" prop="reason">
              <el-input
                type="textarea"
                v-model="noPassReason.reason"
              ></el-input>
            </el-form-item>
            <el-button
              style="margin-left: 150px;"
              type="primary"
              @click="submitReasonForm('noPassReason')"
              >确定</el-button
            >
            <el-button type="danger" @click="noPassCancel">取消</el-button>
          </el-form>
        </div>
      </el-dialog>
    </div>
    <el-row style="margin-left: 50px;">
      <el-col :span="5">
        <el-pagination
          @size-change="pageSizeChange"
          @current-change="pageNumChange"
          :current-page="page.current"
          :page-sizes="[1, 5, 10]"
          :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
        >
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      page: {},
      refundState: null,
      options: [
        {
          state: "0",
          label: "待处理"
        },
        {
          state: "1",
          label: "退款中"
        },
        {
          state: "2",
          label: "退款成功"
        },
        {
          state: "3",
          label: "已驳回"
        }
      ],
      showCheckWindow: false,
      showReplyWindow: false,
      applyMessage: {},
      noPassReason: {
        reason: ""
      },
      rules: {
        reason: [
          {
            required: true,
            message: "请输入原因",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    pageSizeChange(size) {
      this.page.current = 1;
      this.splitePage(this.page.current, size);
    },
    pageNumChange(current) {
      this.splitePage(current, this.page.size);
    },
    listRefundOrders() {
      //查找全部
      //调用分页函数
      this.splitePage(this.page.current, this.page.size);
    },
    splitePage(pageNum, pageSize) {
      this.$http
        .get("/orderRefund/admin/selectRefundOrders", {
          params: {
            pageNum: pageNum,
            pageSize: pageSize,
            refundState: this.refundState
          }
        })
        .then(resp => {
          console.log(resp.data.data);
          //将分页信息传入data区中
          this.page = resp.data.data;
        });
    },
    handleCheckClick(row) {
      this.applyMessage = JSON.parse(JSON.stringify(row));
      this.showCheckWindow = true;
    },
    handleNoPassClick(applyMessage) {
      this.showCheckWindow = false;
      this.showReplyWindow = true;
      this.noPassReason.refundId = this.applyMessage.refundId;
    },
    noPassCancel() {
      this.showReplyWindow = false;
      this.noPassReason.reason = "";
      this.noPassReason.refundId = "";
    },
    submitReasonForm(noPassReason) {
      this.$refs[noPassReason].validate(valid => {
        if (valid) {
          this.$http
            .post("/orderRefund/admin/applyNoPass", this.noPassReason)
            .then(resp => {
              alert(resp.data.message);
              this.showReplyWindow = false;
              this.noPassReason.reason = "";
              this.noPassReason.refundId = "";
              this.listRefundOrders();
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    refund() {
      this.$http
        .post("/orderRefund/admin/refund", {
          refundId: this.applyMessage.refundId,
          orderId: this.applyMessage.orderId
        })
        .then(resp => {
          alert(resp.data.message);
          this.listRefundOrders();
          this.showCheckWindow=false;
        });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    }
  },
  created() {
    this.listRefundOrders();
  }
};
</script>

<style scoped>
@import "../../assets/login/css/style.css";
@import "../../assets/bootstrap-3.3.4/dist/css/bootstrap.min.css";
@import "../../assets/Flat-UI-master/dist/css/flat-ui.min.css";
.row {
  margin-left: 20px;
  margin-right: 20px;
}

.line-center {
  line-height: 50px;
  text-align: center;
}

.row input {
  width: 50px;
}

.list-group-item:hover {
  background: #27ae60;
}

.list-group-item div:first-child:hover {
  cursor: pointer;
}

.bread {
  margin-top: 50px;
  margin-left: 50px;
}
</style>
